// xxxx:刷新后不在当前页了，变成了第一页


import React, { useState, useEffect } from 'react'

// axios
import axios from 'axios';

// antd
import { Table, Button, Tag, Modal } from "antd"
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;

export default function RightList() {

  // 表格数据源
  const [dataSource, setdataSource] = useState([])
  // 表格标题列
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return (
          <b>{id}</b>
        )
      }
    },
    {
      title: '权限名称',
      dataIndex: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => {
        return (
          <Tag color="orange">{key}</Tag>
        )
      }
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Button type="primary" shape="circle" icon={<EditOutlined />} />
            <Button danger shape="circle" icon={<DeleteOutlined />} style={{ marginLeft: '8px' }} onClick={() => {
              check(item)
            }} />
          </div>
        )
      }
    },
  ];

  // 从后端获取dataSorce数据
  useEffect(() => {
    axios.get("http://localhost:5000/rights?_embed=children").then(res => {
      // 如果.children=[],就转成‘’，防止显示为‘可展开’
      let temp = res.data
      // 不需要返回值的遍历用forEach 
      temp.forEach((item) => {
        if (item.children?.length === 0) {
          item.children = ''
        }
      })
      setdataSource(temp)
    })
  }, [])

  // 确认删除
  const check = (item) => {
    confirm({
      title: '确认删除吗?',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        realDelet(item)
      },
      onCancel() {
      },
    });
  }

  // 删除
  const realDelet = (item) => {
    // 删除一层数据
    if (item.grade === 1) {
      // 删除本地
      let temp = dataSource.filter((o) => {
        return o.id !== item.id
      })
      setdataSource(temp)
      // 删除服务器数据
      axios.delete(`http://localhost:5000/rights/${item.id}`)
    } else {
      // 删除二层数据
      // 删除本地
      // ①根据二层数据（item.rightId）找到对应的一层数据
      let gra1 = dataSource.filter((o) => {
        return o.id === item.rightId
      })
      // ②删除对应的一层数据下的对应的二层数据
      gra1[0].children = gra1[0].children.filter((o) => {
        return o.id !== item.id
      })
      // 改变dataSource
      // 虽然dataSource在filter是没有改变他自己的一维数组，但是在他的children身上filter改变了dataSource的二维数组
      // 又因为dataSource的一位数组没有改变，对二位数组的引用也没有改变，但是二维数组的实际数据改变了
      // 所以要改变dataSource就要展开所有，不然不会监听到变化，页面就不会会从更新渲染了
      setdataSource([...dataSource])
      // 删除服务器
      axios.delete(`http://localhost:5000/children/${item.id}`)
    }
  }


  return (
    <Table dataSource={dataSource} columns={columns}
      pagination={{ defaultPageSize: 8 }} />
  )
}
